<template>
  <div class="container">
    <el-form>
      <el-form-item label="文章标题：">
        <el-input class="title" v-model="title"></el-input>
      </el-form-item>
      <el-form-item label="文章内容：">
        <!-- 富文本编辑器 -->
        <quill-editor v-model="content" :options="options"></quill-editor>
      </el-form-item>
      <el-form-item label="文章来源：">
        <el-radio-group v-model="source">
          <el-radio :label="1">原创</el-radio>
          <el-radio :label="2">转载</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发布版块：">
        <el-select v-model="channels" filterable placeholder="请选择分类">
          <el-option
            v-for="item in $store.state.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" style="float:right" @click="publish">发 布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      source: 0,
      channels: "",
      content: "",
      title: '',
      options: {
        placeholder: "请输入内容......",
        modules: {
          toolbar: [["bold", "italic", "link", "image"]],
        },
      },
    };
  },
  methods: {
    publish() {
      this.$router.push('/home')
      this.$message.success('文章发布成功！！！')
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 800px;
  margin: 0 auto;
  padding-top: 30px;
}
.quill-editor {
  width: 100%;
  height: 500px;
  margin: 42px 0;
}
.quill-editor {
  background-color: #fff;
}
</style>
